import NotFoundTitle from "./components/layout/not-found-title";
import Image from "next/image";
import starSky from "@/assets/images/8K星空.jpg";
import Link from "next/link";
import RouterBack from "./components/layout/router-back";

const NotFound: React.FC = async () => {
  return (
    <div className="relative">
      <NotFoundTitle />
      <Image
        alt="8K星空"
        src={starSky}
        placeholder="blur"
        quality={100}
        fill
        sizes="100vw"
        style={{
          objectFit: "cover",
        }}
      ></Image>
      <div className="relative h-[100vh] overflow-hidden">
        <div className="absolute inset-0 opacity-25"></div>
        <div className="container relative z-10 flex items-center left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
          <div className="relative z-10 flex flex-col items-center w-full font-mono">
            <h1 className="mt-4 text-4xl font-extrabold leading-tight text-center text-white">
              Sorry, 您访问的页面不存在...
            </h1>
            <p className="font-extrabold  text-8xl my-10 animate-bounce text-white">
              404
            </p>
            <div className="flex items-center w-1/4 mt-6 gap-x-3 shrink-0 sm:w-auto min-w-[352px]">
              <RouterBack />
              <Link
                href="/"
                className="block w-1/2 px-5 py-2 text-sm tracking-wide text-white transition-colors duration-200 bg-blue-500 text-center rounded-lg shrink-0 sm:w-auto hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600"
              >
                首页
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFound;
